class RoomType extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [''],
            values: {}
        };
        this.pageCount = 0;
    }

    componentDidMount() {
        let reFoot = /^\d+(\.\d+)?$/;
        this.verify = {
            roomTypeName: function (value) {
                if (value.length < 2) {
                    return '户型名称至少得2个字符!';
                }
            },
            floorArea: function (value) {
                if (!reFoot.test(value)) {
                    return '建筑面积输入错误！';
                }
            },
            innerArea: function (value) {
                if (value && !reFoot.test(value)) {
                    return '套内面积输入错误！';
                }
            },
            poolArea: (value) => {
                if (value && !reFoot.test(value)) {
                    return '公摊面积输入错误！';
                }
            }
        };
    }

    btnSubmit() {
        let params = this.state.values;
        params.commCode = this.refs.buildingSelectModal.commCode;
        postJson("/RoomTypeCtrl/saveRoomType.x", params, (data) => {
            this.updateRoomTypeList(1, 10);
            layer.msg('添加成功', {icon: 6});
            this.refs.createRoomTypeModal.close();
        });
    }

    /* custom functions */
    updateRoomTypeList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        params.roomTypeName = this.refs.searchRoomTypeName.value;
        params.commCode = this.refs.buildingSelectList.commCode;
        postJson("/RoomTypeCtrl/queryRoomTypePage.x", params, (data) => {
            this.pageCount = data.data.size;
            this.setState({
                list: data.data.list
            });
        })
    }

    search() {
        this.updateRoomTypeList(1, 10);
    }

    modify(roomType) {
        this.setState({values: Object.create(roomType)});
        this.refs.createRoomTypeModal.show();
    }

    createRoomType() {
        this.refs.createRoomTypeModal.show();
    }

    delete(id) {
        layui.layer.confirm('确定要删除该户型么?删除之后所有分配户型的房间都将没有户型，需要重新分配!', (index) => {
            let params = {};
            params.id = '' + id;
            postJson("/RoomTypeCtrl/deleteRoomType.x", $.param(params), () => {
                this.refs.table.refresh();
                layui.layer.msg("戶型删除成功!");
            });
            layui.layer.close(index);
        });

    }

    construct(commCode) {
        document.location.href = '/AreaCtrl/genArea.x?commCode=' + commCode;
    }

    valueChange(name, value) {
        this.state.values[name] = value;
        this.setState({values: this.state.values});
    }

    endCallback() {
        this.setState({values: emptyObj(this.state.values, ["id"])});
    }

    selectCommCallback() {
        this.updateRoomTypeList(1, 10);
    }

    render() {
        return (<div>
                <Form type="pane" verify={() => {
                    return this.verify;
                }}>
                    <Item>
                        <LayuiCommSelect
                            formLabelName="小区选择"
                            mask={['building', 'unit', 'floor', 'room']}
                            ref="buildingSelectList"
                            onChangeComm={(comm) => this.selectCommCallback(comm)}/>
                        <Label width="lg">戶型名称</Label>
                        <Input name="searchRoomTypeName" ref="searchRoomTypeName" btnType="normal"/>
                        <Button btnType="normal" onClick={() => this.search()}>查询</Button>
                    </Item>
                    <Table ref="table" count={this.pageCount}
                           pageOnClick={(page, pageSize) => this.updateRoomTypeList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th>户型名</th>
                            <th>建筑面积</th>
                            <th>套内面积</th>
                            <th>公摊面积</th>
                            <th>户型图</th>
                            <th>描述</th>
                            <th width="100">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.list.map((roomType) => {
                                return <tr>
                                    <td>{roomType.roomTypeName}</td>
                                    <td>{roomType.floorArea}</td>
                                    <td>{roomType.innerArea}</td>
                                    <td>{roomType.poolArea}</td>
                                    <td>{roomType.roomTypeUrl}</td>
                                    <td>{roomType.description}</td>
                                    <td>
                                        <Button btnType="normal" size="xs"
                                                onClick={() => this.modify(roomType)}>修改</Button>
                                        <Button btnType="danger" size="xs"
                                                onClick={() => this.delete(roomType.id)}>删除</Button>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>
                </Form>
                <Modal title="编辑户型"
                       ref="createRoomTypeModal"
                       endCallback={() => this.endCallback()}>
                    <Form type="pane" size="sm">
                        <Item>
                            <LayuiCommSelect
                                formLabelName="小区选择"
                                mask={['building', 'unit', 'floor', 'room']}
                                ref="buildingSelectModal"/>
                        </Item>
                        <Item>
                            <Label>户型名称</Label>
                            <Input
                                type="text"
                                name="roomTypeName"
                                ref="roomTypeName"
                                lay-verify="roomTypeName"
                                value={this.state.values.roomTypeName}
                                onChange={(value) => {
                                    this.valueChange('roomTypeName', value)
                                }}
                                placeholder="请输入户型名称"/>
                        </Item>
                        <Item>
                            <Label>建筑面积</Label>
                            <Input
                                type="text"
                                name="floorArea"
                                ref="floorArea"
                                lay-verify="floorArea"
                                value={this.state.values.floorArea}
                                onChange={(value) => {
                                    this.valueChange('floorArea', value)
                                }}
                                placeholder="请输入建筑面积"/>
                        </Item>
                        <Item>
                            <Label>套内面积</Label>
                            <Input
                                type="text"
                                name="innerArea"
                                ref="innerArea"
                                lay-verify="innerArea"
                                value={this.state.values.innerArea}
                                onChange={(value) => {
                                    this.valueChange('innerArea', value)
                                }}
                                placeholder="请输入套内面积"/>
                        </Item>
                        <Item>
                            <Label>公摊面积</Label>
                            <Input
                                type="text"
                                name="poolArea"
                                ref="poolArea"
                                lay-verify="poolArea"
                                value={this.state.values.poolArea}
                                onChange={(value) => {
                                    this.valueChange('poolArea', value)
                                }}
                                placeholder="请输入公摊面积"/>
                        </Item>
                        <Item>
                            <Label>描述</Label>
                            <Input
                                type="text"
                                name="description"
                                ref="description"
                                value={this.state.values.description}
                                onChange={(value) => {
                                    this.valueChange('description', value)
                                }}
                                placeholder="请输入描述"/>
                        </Item>
                        <Item>
                            <Label>户型图</Label>
                            <Input
                                type="text"
                                name="roomTypeUrl"
                                ref="roomTypeUrl"
                                lay-verify="roomTypeUrl"/>
                        </Item>
                        <Item>
                            <Button btnType="normal"
                                    className="layui-btn layui-btn-normal layui-btn-sm layui-form-btn"
                                    lay-submit="true"
                                    onClick={() => this.btnSubmit()}>确定保存</Button>
                        </Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
